<template>
    <div class="vote-vs">

        <div class="item favour">
            <div class="number">{{fixSmallZero(favourCount)}}</div>
            <div class="title">
                <img src="@/assets/favour.svg" alt="">
                赞成票数
            </div>
        </div>
        <div class="float">vs</div>
        <div class="item oppose">
            <div class="number">{{fixSmallZero(opposeCount)}}</div>
            <div class="title">
                <img src="@/assets/oppose.svg" alt="">
                反对票数
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "vs",
    props:['favourCount','opposeCount'],
    date(){
        return {}
    },
    computed:{
        fixSmallZero(n){
            return (n)=>{
                n = typeof n == 'number' ? n.toString() : n
                return n.split('.')[0]
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import '~@res/global.less';
//分数vs
.vote-vs {
    .flex-jcsb();padding:2px 0;position: relative;
    .float{color:#aaa;font-size: 32px;font-weight: bold;transform: skewX(-20deg);text-align: center;}
    .item{
        flex:1;
        .number {font-size: 32px;font-weight: bold;padding: 5px 0;text-align: center;}
        .title{
            .flex-jcc();
            img{
                height:18px;
                font-size: 16px;
                margin-right: 2px;
            }
        }
    }
    .favour{
        .number {color:#3568FF}
        img {}
    }
    .oppose{
        .number {color:#FF356B}
        //img {transform: rotateX(180deg)}
    }
}
</style>